<template>
  <component is="a-modal" v-model:visible="visible" width="80%" :title="title" :mask-closable="false"
             :ok-loading="loading" @cancel="close" @before-ok="submit">
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
      <template #tableSearch>
        <a-col :span="6">
          <a-form-item field="user_id" label="用户UID">
            <a-input v-model="searchForm.user_id" placeholder="请输入" :allow-clear="true"
                     @keydown.enter="refresh"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="order_id" label="订单ID">
           <a-input v-model="searchForm.order_id" placeholder="请输入" :allow-clear="true"
                      @keydown.enter="refresh"></a-input>
          </a-form-item>
        </a-col>
      </template>
    </sa-table>
  </component>
</template>

<script setup>
import { onMounted, ref, reactive, computed } from 'vue'
import mallApi from '@/api/system/mall'
import SaTable from '@cps/sa-table/index.vue'
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
const crudRef = ref()
const visible = ref(false);
const title = ref('')
const searchForm = ref({
  sku_id:'',
  order_id:'',
  user_id:'',
})
const options = reactive({
  api: mallApi.fuxiao_list_detail,//表格数据接口
  operationColumnWidth: 120,//操作欄
  showSearch: true,
  columnAlign: 'center',
  pageSimple: false,//是否展示操作欄有 以及工具欄
  isTreeTable: false,
  isExpand: false,//展開所有子樹
  operationColumn:false,
})
const columns = reactive([
  { title: 'UID', dataIndex: 'user_id', width: 150 },
  { title: '会员账号', dataIndex: 'user_name', width: 150 },
  { title: '订单ID', dataIndex: 'order_id', width: 100 },
  { title: '辅消品销售数量', dataIndex: 'sales', width: 120 },
  { title: '辅消品销售金额', dataIndex: 'sales_price', width: 150 },
  { title: '购买时间', dataIndex: 'buy_time', width: 180 },
])

const initPage = async () => {

}
const refresh = async () => {
  crudRef.value?.refresh()
}
const open=(data)=>{
  console.log('data',data)
  searchForm.value.sku_id=data.id
  crudRef.value?.refresh()
  title.value = '详情'
  visible.value = true;
}
const close=()=>{
  visible.value = false;
}
onMounted(async () => {
  initPage()
  refresh()
})
defineExpose({
  open
})
</script>

<style scoped>
.icon {
  width: 1em;
}
</style>